<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension Icon Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .icon-preview {
            display: flex;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .icon-size {
            text-align: center;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }
        canvas {
            border: 1px solid #ccc;
            margin: 10px 0;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #45a049;
        }
        .instructions {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎵 LyricsPinyin Chrome Extension Icon Generator</h1>
        
        <div class="instructions">
            <h3>使用说明:</h3>
            <ol>
                <li>点击"生成图标"按钮创建不同尺寸的图标</li>
                <li>右键点击每个图标选择"另存为"</li>
                <li>保存为对应的文件名: icon16.png, icon32.png, icon48.png, icon128.png</li>
                <li>将这些文件放入 chrome_extension/icons/ 目录</li>
            </ol>
        </div>

        <button onclick="generateIcons()">生成图标</button>
        <button onclick="downloadAll()">下载所有图标</button>

        <div class="icon-preview" id="iconPreview">
            <!-- 图标预览将在这里显示 -->
        </div>
    </div>

    <script>
        const sizes = [16, 32, 48, 128];
        const canvases = {};

        function generateIcons() {
            const preview = document.getElementById('iconPreview');
            preview.innerHTML = '';

            sizes.forEach(size => {
                const container = document.createElement('div');
                container.className = 'icon-size';
                
                const canvas = document.createElement('canvas');
                canvas.width = size;
                canvas.height = size;
                canvas.id = `icon${size}`;
                canvases[size] = canvas;

                const ctx = canvas.getContext('2d');
                
                // 绘制渐变背景
                const gradient = ctx.createLinearGradient(0, 0, size, size);
                gradient.addColorStop(0, '#22d3ee');
                gradient.addColorStop(1, '#3b82f6');
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(size/2, size/2, size/2 - 1, 0, 2 * Math.PI);
                ctx.fill();

                // 绘制边框
                ctx.strokeStyle = '#1e293b';
                ctx.lineWidth = 1;
                ctx.stroke();

                // 绘制音符
                ctx.fillStyle = 'white';
                const noteSize = size * 0.6;
                const centerX = size / 2;
                const centerY = size / 2;

                // 简化的音符图案
                if (size >= 32) {
                    // 音符符干
                    ctx.fillRect(centerX - noteSize/8, centerY - noteSize/3, noteSize/12, noteSize/2);
                    ctx.fillRect(centerX + noteSize/8, centerY - noteSize/2.5, noteSize/12, noteSize/1.8);
                    
                    // 音符符头
                    ctx.beginPath();
                    ctx.ellipse(centerX - noteSize/6, centerY + noteSize/6, noteSize/8, noteSize/12, -Math.PI/6, 0, 2 * Math.PI);
                    ctx.fill();
                    
                    ctx.beginPath();
                    ctx.ellipse(centerX + noteSize/6, centerY + noteSize/8, noteSize/8, noteSize/12, -Math.PI/6, 0, 2 * Math.PI);
                    ctx.fill();

                    // 连接线
                    ctx.fillRect(centerX - noteSize/8, centerY - noteSize/3, noteSize/4, noteSize/15);
                } else {
                    // 小尺寸时使用简单的音符符号
                    ctx.font = `${size * 0.7}px Arial`;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('♪', centerX, centerY);
                }

                container.innerHTML = `
                    <h4>${size}x${size}</h4>
                    <div>${canvas.outerHTML}</div>
                    <button onclick="downloadIcon(${size})">下载 icon${size}.png</button>
                `;
                
                preview.appendChild(container);
            });
        }

        function downloadIcon(size) {
            const canvas = document.getElementById(`icon${size}`);
            const link = document.createElement('a');
            link.download = `icon${size}.png`;
            link.href = canvas.toDataURL();
            link.click();
        }

        function downloadAll() {
            sizes.forEach(size => {
                setTimeout(() => downloadIcon(size), size * 10);
            });
        }

        // 页面加载时自动生成图标
        window.onload = generateIcons;
    </script>
</body>
</html> 